<html>
<head>
    <meta charset="utf-8">
    <title>分类添加</title>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <script src="${base}/sweep/js/mui.min.js"></script>
    <script src="${base}/backstage/layui/layui.js"></script>
    <script src="${base}/backstage/wangEdit/wangEditor.js"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js"></script>
    <script>
        var base =  "${base}";
    </script>
    <script src="${base}/backstage/js/ipNameUrl.js"></script>
    <style>
        /*给数据表格加高*/
        .layui-table-cell{
            height:50%;
        }
    </style>
</head>
<body>
<form class="layui-form " action="" style="padding-left: 15px;">
<br>
<br>
    <div class="layui-form-item">
        <label class="layui-form-label">商品分类</label>
        <div class="layui-input-block">
            <select name="modules" id="classificationId" lay-verify="required" lay-search="">
                <option value="">直接选择商品分类</option>
                <#list commodityClassification as commodityClassification>
                    <option value="${commodityClassification.id}">${commodityClassification.name}</option>
                </#list>

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input class="layui-input" name="type"  id="type" placeholder="请输入类型" autocomplete="off">
        </div>
    </div>


    <div class="layui-collapse" lay-accordion="" >
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">分类名称</h2>
            <div class="layui-colla-content layui-show">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>



<br>
<br>
    <div align="center">
        <button type="button" class="layui-btn" id="saveButton">保存</button>
        <button type="button" class="layui-btn" onclick="window.history.back(-1);">返回</button>
    </div>
    <br>
    <br>
</form>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="toolbarDemo" >
        <form class="layui-form " action="" >
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input class="layui-input" name="name"  id="name" placeholder="请输入商品分类名称" autocomplete="off">
                    </div>
                </div>
            <br>
            <div class="layui-form-item" >
                <div id="file1Div">

                </div>
                <input id="file" class="weui_input upload" type="file" accept="image/*" name="file"/>

            </div>
            <button type="button" style="display: none;" class="layui-btn" id="fileUploadAction">开始上传</button>
            <br>

            <div class="layui-form-item" style="text-align: center">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-event="add">添加分类</button>
                </div>
            </div>
        </form>

    </script>


</body>
<script>

    var param = "";
    var form;
    var upload;
    layui.use(['table', 'form', 'layedit', 'laydate', 'layer','element','upload'], function () {
        form = layui.form
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate

            , layer = layui.layer;
        upload = layui.upload;

        $(document).on('change', '.upload', function () {
            //上传接口
            var url = "${base}/admin/file/uploadFile";

            //执行实例
            upload.render({
                elem: '#' + $(this).attr('id')//绑定元素
                , url: url
                , accept: 'images'
                , multiple: false
                , auto: false
                , bindAction: '#fileUploadAction'
                , before: function (obj) {
                    layer.load();
                }
                , done: function (res) { //上传完毕回调
                    layer.msg("上传成功")
                    $('#file1Div').html("")
                    $('#file1Div').append('<img src="' + res.data + '" style="width: 342px;height: 136px">'); //图片链接（base64）
                    param=res.data
                    layer.closeAll('loading');
                }
                , error: function () {   //请求异常回调
                    layer.msg("上传失败")
                }
            });

            //鼠标点击事件执行附件上传操作
            $("#fileUploadAction").click();
        });




        //派工单
        table.render({
            skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , elem: '#test'
            , toolbar: '#toolbarDemo'
            ,data:[]
            , cols: [[
                {field: 'name', title: '分类名称',align: 'center'},
                {field:'url', title: '图片',templet:function(val){
                        return "<img src="+val.url+">";
                    }, align:'center'},
                {field: '', title: '操作',toolbar: '#barDemo',align: 'center'},
            ]]
            , id: 'testReload'
            ,limits:[999999]
            ,limit:999999
        });

        //添加表格
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    if($("#name").val()==""){
                        layer.msg("分类名称不能为空")
                        return
                    }
                    if(param==""){
                        layer.msg("图片不能为空")
                        return
                    }
                    var prodJson = {
                        name:$("#name").val() ,
                        url:param ,
                    }
                    layui.table.cache.testReload.push(prodJson);
                    table.reload('testReload',{
                        data: layui.table.cache.testReload
                    });
                    break;
            };

        });

        //删除数据
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除吗？', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });


    })

    $("#saveButton").on("click", function () {


        if ($("#classificationId").val()=="") {
            layer.msg("请填写商品分类名称！")
            return;
        }
        if ($("#type").val()=="") {
            layer.msg("请填写类型！")
            return;
        }


        var formDate = {
            classificationId: $("#classificationId").val(),
            type: $("#type").val(),
            prods:JSON.stringify(layui.table.cache.testReload)
        }

        $.ajax({
            type: "POST",
            // contentType: "application/json;charset=UTF-8",
            url: "${base}/admin/classification/save",
            data: formDate,
            success: function (data) {
                if (data.code === 200) {
                    layer.msg(data.msg)
                    window.location.href = "${base}/admin/classification/classification.html"
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    })

</script>
</html>


